<template>
  <div class="app-page-scroll">
    <t-card header="基础用法">
      <lg-collapse title="标题1">
        一是加强顶层设计和系统筹划，推动形成“1+5”政策体系。1是总体制度设计，5是“五篇大文章”的各自举措，我们会同有关部门做这个工作，明确工作目标、重点任务和实施路径。一方面，要抓好已出台的政策落地生效。另一方面，“五篇大文章”中养老金融和数字金融等领域的政策正在抓紧制定，让“五篇大文章”的制度设计更加健全，政策框架更加牢固。
      </lg-collapse>
      <lg-collapse title="标题2">
        二是要通过激励机制，引导金融资源向重点领域倾斜。要充分发挥结构性货币政策工具，用好新设立的5000亿元科技创新和技术改造再贷款，支持中小科技企业和重点领域数字化、智能化、高端化升级改造。放款普惠小微贷款认定标准至单户授信不超过2000万元，引导更多金融资源精准投向普惠领域。推进完善相关领域金融统计指标体系，研究健全科技金融、数字金融等重点领域的金融服务评估机制。
      </lg-collapse>
      <lg-collapse title="标题3">
        三是要鼓励金融机构发挥自身组织、管理和技术优势，应用互联网、大数据等信息手段，增强服务科技、绿色、中小微企业的能力水平，提升金融服务的适配度和普惠性，积极推进科技、绿色等区域金融创新改革试点，打造可复制、可推广的典型服务模式。
      </lg-collapse>
    </t-card>

    <t-card header="属性配置">
      <div class="cpm-separator">禁用头部：:disabled-title="true"</div>
      <lg-collapse title="标题1" disabled-title>
        一是加强顶层设计和系统筹划，推动形成“1+5”政策体系。1是总体制度设计，5是“五篇大文章”的各自举措，我们会同有关部门做这个工作，明确工作目标、重点任务和实施路径。一方面，要抓好已出台的政策落地生效。另一方面，“五篇大文章”中养老金融和数字金融等领域的政策正在抓紧制定，让“五篇大文章”的制度设计更加健全，政策框架更加牢固。
        <template #bottom="{ change, expanded }">
          <t-button @click="change">{{ expanded ? '收起' : '展开' }}</t-button>
        </template>
      </lg-collapse>

      <div class="cpm-separator">禁用标题触发：:title-trigger="false"</div>
      <lg-collapse title="标题1" :title-trigger="false">
        <template #right>点头部右侧展开</template>
        一是加强顶层设计和系统筹划，推动形成“1+5”政策体系。1是总体制度设计，5是“五篇大文章”的各自举措，我们会同有关部门做这个工作，明确工作目标、重点任务和实施路径。一方面，要抓好已出台的政策落地生效。另一方面，“五篇大文章”中养老金融和数字金融等领域的政策正在抓紧制定，让“五篇大文章”的制度设计更加健全，政策框架更加牢固。
      </lg-collapse>

      <div class="cpm-separator">禁用：:disabled="true"</div>
      <lg-collapse title="标题1" disabled>
        一是加强顶层设计和系统筹划，推动形成“1+5”政策体系。1是总体制度设计，5是“五篇大文章”的各自举措，我们会同有关部门做这个工作，明确工作目标、重点任务和实施路径。一方面，要抓好已出台的政策落地生效。另一方面，“五篇大文章”中养老金融和数字金融等领域的政策正在抓紧制定，让“五篇大文章”的制度设计更加健全，政策框架更加牢固。
      </lg-collapse>

      <div class="cpm-separator">v-model控制：v-model="flag"</div>
      <lg-collapse v-model="flag" title="标题1">
        一是加强顶层设计和系统筹划，推动形成“1+5”政策体系。1是总体制度设计，5是“五篇大文章”的各自举措，我们会同有关部门做这个工作，明确工作目标、重点任务和实施路径。一方面，要抓好已出台的政策落地生效。另一方面，“五篇大文章”中养老金融和数字金融等领域的政策正在抓紧制定，让“五篇大文章”的制度设计更加健全，政策框架更加牢固。
      </lg-collapse>
      <t-button @click="flag = !flag">{{ flag ? '收起' : '展开' }}</t-button>
    </t-card>

    <t-card header="插槽">
      <lg-collapse>
        <template #title> 标题插槽（title） </template>
        <template #right>右侧插槽（right）</template>
        <template #bottom>底部插槽（bottom）</template>
        一是加强顶层设计和系统筹划，推动形成“1+5”政策体系。1是总体制度设计，5是“五篇大文章”的各自举措，我们会同有关部门做这个工作，明确工作目标、重点任务和实施路径。一方面，要抓好已出台的政策落地生效。另一方面，“五篇大文章”中养老金融和数字金融等领域的政策正在抓紧制定，让“五篇大文章”的制度设计更加健全，政策框架更加牢固。
      </lg-collapse>
    </t-card>

    <!---------------------------------   api说明文档      -------------------------------------------->
    <t-card header="属性">
      <t-base-table :columns="propColumns" :data="propsData" style="width: 100%" />
      <div>其他属性参考 t-auto-complete 组件</div>
    </t-card>
    <t-card header="事件">
      <t-base-table :columns="emitColumns" :data="emitData" style="width: 100%" />
      <div>事件参考 t-auto-complete 组件</div>
    </t-card>
    <t-card header="插槽">
      <t-base-table :columns="slotColumns" :data="slotData" style="width: 100%" />
    </t-card>
    <t-card header="api">
      <t-base-table :columns="apiColumns" :data="apiData" style="width: 100%" />
    </t-card>
  </div>
</template>
<script lang="ts" setup>
import './index.less';
import { ref } from 'vue';
import { apiColumns, emitColumns, propColumns, slotColumns } from './index';
import LgCollapse from '@/soar/components/LgCollapse/index.vue';

const flag = ref(false);

const propsData = [
  { name: 'title', desc: '标题', type: 'string', def: '' },
  { name: 'modelValue', desc: '展开收起控制，支持v-model', type: 'Boolean', def: '' },
  { name: 'titleTrigger', desc: '是否启用标题触发', type: 'Boolean', def: 'true' },
  { name: 'disabledTitle', desc: '是否禁用头部', type: 'Boolean', def: 'false' },
  { name: 'disabled', desc: '是否禁用', type: 'Boolean', def: 'false' },
];

const emitData = [{ name: 'change', desc: '展开收起变化', param: 'Boolean' }];

const apiData = [
  { name: 'change', desc: '切换展开收起', type: 'function', sample: 'change()' },
  { name: 'open', desc: '展开', type: 'function', sample: 'open()' },
  { name: 'close', desc: '收起', type: 'close', sample: 'close()' },
];

const slotData = [
  { name: 'default', desc: '默认插槽，内容', scope: 'expanded，change' },
  { name: 'title', desc: '标题插槽', scope: 'expanded，change' },
  { name: 'right', desc: '头部右侧插槽', scope: 'expanded，change' },
  { name: 'bottom', desc: '底部插槽', scope: 'expanded，change' },
];
</script>
